<template>
  <div >
    <div class="recommend-tittle">热销推荐</div>
      <ul>
        <li class="item border-bottom" v-for="item of recommendList" :key="item.id">
          <img :src= "item.imgUrl">
          <div class="p-warp">
            <p class="p-tittle">
              {{item.title}}
            </p>
            <p class="p-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
          </div>
        </li>
      </ul>

  </div>
</template>

<script>
  export default {
    name: 'HomeRecommend',
    props:{
      recommendList:Array
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .recommend-tittle
    line-height: .8rem
    height: .8rem
    margin-top: .1rem
    background-color: #eee
    text-indent: .2rem
  .item
    overflow: hidden
    height: 1.9rem
    display: flex
    .img
      padding: .1rem
      width: 1.7rem
      height: 1.7rem
    .p-warp
      flex:1
      padding: .2rem
      box-sizing: border-box
      line-height: .5rem
      min-width 0
      .p-tittle
        color: #333
        font-size: .32rem
        font-weight bold
      .p-desc
        color: #ccc
        line-height: .46rem
        ellipse()
      .item-button
        background-color: orangered
        color: #ffffff
        margin-top: .16rem
        padding:0 .2rem
        border-radius .06rem
        font-size: .26rem


</style>
